<template>
  <view class="page-setting">
    <view class="header">
      <view class="title">{{ $t('mine.设置') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <view class="options-wrapper">
      <view class="option-item" @click="handleAvatar">
        <view class="label">{{ $t('mine.头像') }}</view>
        <view class="value-wrapper">
          <view class="value">
            <image :src="avatar" mode="aspectFill" class="user-avatar" />
          </view>
          <uni-icons type="right" color="#000000" size="24"></uni-icons>
        </view>
      </view>
      <view class="option-item" @click="handleNickname">
        <view class="label">{{ $t('mine.昵称') }}</view>
        <view class="value-wrapper">
          <view class="value">{{ userInfo.nickname }}</view>
          <uni-icons type="right" color="#000000" size="24"></uni-icons>
        </view>
      </view>
      <view class="option-item">
        <view class="label">{{ $t('mine.邮箱') }}</view>
        <view class="value-wrapper">
          <view class="value">{{ userInfo.email }}</view>
        </view>
      </view>
      <view class="option-item" @click="handleCashPwd()">
        <view class="label">{{ $t('mine.交易密码') }}</view>
        <view class="value-wrapper">
          <view class="value">{{ $t('mine.修改') }}</view>
          <uni-icons type="right" color="#000000" size="24"></uni-icons>
        </view>
      </view>
      <view class="option-item" @click="handleLoginPwd()">
        <view class="label">{{ $t('mine.登录密码') }}</view>
        <view class="value-wrapper">
          <view class="value">{{ $t('mine.修改') }}</view>
          <uni-icons type="right" color="#000000" size="24"></uni-icons>
        </view>
      </view>
      <view class="option-item" @click="handleChangeLang">
        <view class="label">{{ $t('mine.设置') }}</view>
        <view class="value-wrapper">
          <view class="value">{{ lang }}</view>
          <uni-icons type="right" color="#000000" size="24"></uni-icons>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
      <view class="popup-wrapper">
        <view class="popup-header">
          <view>{{ $t('mine.设定') }}</view>
          <uni-icons type="closeempty" color="#dddddd" size="24" class="close-icon" @click="handleClose"></uni-icons>
        </view>
        <view class="popup-content">
          <view class="popup-item" v-for="item in messagesList" :key="item.value" @click="handleSelectLang(item.value)">{{ item.label }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import config from '@/config'
  import { getInfo } from '@/api/login'
  import { isHttp, isEmpty } from '@/utils/validate'
  import { getToken } from '@/utils/auth'
  import { messages } from '@/lang/index.js'
  import { uploadAvatar } from '@/api/system/user.js'
  import { setLang, getLang } from '@/utils/auth'
  import defAva from '@/static/images/profile.png'

  const imgUrl = config.imgUrl
  export default {
    onShow() {
      this.getUserInfo()
    },
    data() {
      return {
        messagesList: [],
        lang: '',
        flag: false,
        userInfo: {}
      }
    },
    computed: {
      avatar() {
        let avatar = this.userInfo?.headPortrait || ''
        if (!isHttp(avatar)) {
          avatar = isEmpty(avatar) ? defAva : imgUrl + avatar
        }
        return avatar
      }
    },
    onPullDownRefresh() {
      this.getUserInfo()
      uni.stopPullDownRefresh()
    },
    methods: {
      getUserInfo() {
        this.$modal.loading('loading', 'loading')
        getInfo()
          .then((res) => {
            this.$modal.closeLoading()
            this.userInfo = res.result?.data || {}
          })
          .catch(() => {
            this.$modal.closeLoading()
          })
      },
      // 返回
      handleBack() {
        if (!this.flag) {
          // this.$tab.navigateBack()
          this.$tab.reLaunch('/pages/mine/index')
          return
        }
        setTimeout(() => {
          this.$tab.reLaunch('/pages/guide')
        }, 500)
      },
      // 头像
      handleAvatar() {
        uni.chooseImage({
          success: (res) => {
            let imageSrc = res.tempFilePaths
            const baseUrl = config.baseUrl
            const uploadTask = uni.uploadFile({
              url: baseUrl + '/business/upload',
              filePath: imageSrc[0],
              name: 'file',
              header: {
                'x-api-key': getToken()
              },
              success: (uploadRes) => {
                let { statusCode, data } = uploadRes
                data = JSON.parse(data)
                let { message } = data
                if (statusCode == 200) {
                  uploadAvatar({ avatar: message }).then(() => {
                    this.$modal.msgSuccess(this.$t('mine.修改成功'))
                    this.getUserInfo()
                  })
                } else {
                  uni.showToast({
                    title: message
                  })
                }
              },
              fail: (err) => {
                console.error('上传失败', err)
              }
            })
          }
        })
      },
      // 昵称
      handleNickname() {
        this.$tab.navigateTo('/pages/mine/name/index')
      },
      //登录密码
      handleLoginPwd() {
        this.$tab.navigateTo('/pages/mine/loginPwd/index')
      },
      //交易密码
      handleCashPwd() {
        this.$tab.navigateTo('/pages/mine/cashPwd/index')
      },
      // 初始化多语言
      initLang() {
        this.messagesList = Object.keys(messages).map((key) => {
          return {
            label: messages[key].language,
            value: key
          }
        })
        let lang = getLang() || 'Korean'
        let langLabel = this.messagesList.find((item) => item.value === lang)?.label
        this.lang = langLabel
      },
      // 切换语言
      handleChangeLang() {
        this.$refs.popup.open('bottom')
      },
      // 选择语言
      handleSelectLang(lang) {
        this.flag = true
        this.lang = this.messagesList.find((item) => item.value === lang)?.label
        this.$refs.popup.close()
        setLang(lang)
        this.$i18n.locale = lang
      },
      //关闭
      handleClose() {
        this.$refs.popup.close()
      }
    },
    created() {
      this.initLang()
    }
  }
</script>

<style lang="scss" scoped>
  .page-setting {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .options-wrapper {
      padding: 100rpx 20rpx 0;
      .option-item {
        min-height: 60px;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #999;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .value-wrapper {
          display: flex;
          align-items: center;
          .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 100%;
          }
        }
      }
    }
    .popup-wrapper {
      background-color: #fff;
      .popup-header {
        padding: 12px 30px;
        text-align: center;
        position: relative;
        .close-icon {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .popup-content {
        .popup-item {
          padding: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-bottom: 1px solid #d6d7d9;
        }
      }
    }
  }
</style>
